<template>
  <div class="w-full bg-[#f7f7f7]" id="div-1">
    <!-- <div class="m-auto w-3/5 bg-[#fff]">1231</div> -->
    <div class="m-auto w-3/5 py-4 pt-8" id="div-2">
      <a-row :gutter="15" id="a-row-1">
        <a-col :span="17" class="" id="a-col-1">
          <div id="div-222" class="bg-[#fff] border-solid border border-[#ccc] !p-[14px]">
            <a-row class="flex" id="div-3">
              <a-col :span="6" id="div-4">
                <a-image
                  src="https://picsum.photos/id/3/200/150"
                  width="100%"
                  height="100%"
                  class="object-cover aspect-[4/3]"
                  :id="`div-5`"
                />
              </a-col>
              <a-col :span="18" class="" id="div-6">
                <a-typography-title :level="5" class="pl-[10px]" id="div-7">
                  <a-typography-link href="#" id="div-71" class="!text-[#333]"
                    >极速空间2025年新年力作：CPU AI性能天梯图DIY版正式发布</a-typography-link
                  >
                </a-typography-title>
                <a-typography-paragraph class="text-gray-666 text-[14px] mt-2 !mb-0 pl-[10px]" id="div-8">
                  极速空间CPU AI性能天梯图DIY系统请用谷歌浏览器，edge浏览器暂时无法出图 于2025年2月5日正式发布！
                  当前，世界处于人工智能大爆发的初期，AI性能越来越重要，对大多数用户来说，要弄清楚众多型号的算力差异，最简单的办法就是看“天梯图”。和目前的静态天梯图不同的是，站长这次采用了一种全新的方法去实现，您可以轻点鼠标，就能打造个性化的“CPU
                  AI性能天梯图”。系统特
                </a-typography-paragraph>
                <a-typography-paragraph class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none" id="div-9"
                  >02-05</a-typography-paragraph
                >
              </a-col>
            </a-row>
            <a-divider class="my-[10px]" id="div-10" />
            <a-row id="div-11" :gutter="20" class="mt-[14px]">
              <a-col :span="12" v-for="(item, index) in articleList" :key="index" class="my-[8px]" :id="`div-12-${index}`">
                <a-row :wrap="false" class="items-center" :id="`div-13-${index}`">
                  <a-col flex="none" :id="`div-14-${index}`">
                    <a-avatar
                      shape="square"
                      :size="16"
                      class="!text-[12px] bg-[#999]"
                      :id="`div-15-${index}`"
                      :class="{
                        '!bg-[#F0524F]': index == 0,
                        '!bg-[#2E9AE8]': index == 1,
                      }"
                    >
                      {{ index + 2 }}
                    </a-avatar>
                  </a-col>
                  <a-col flex="auto" class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]" :id="`div-16-${index}`">
                    <a-typography-link href="#" :id="`div-161-${index}`" class="!text-[#333]">{{ item.title }}</a-typography-link>
                  </a-col>
                  <a-col flex="none" :id="`div-171-${index}`">
                    <div class="text-gray-400 text-sm ml-[40px]" :id="`div-17-${index}`"> {{ item.date }}</div>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
          </div>
        </a-col>
        <a-col :span="7" class="h-full" id="div-18">
          <div id="div-19" class="bg-[#fff] border-solid border border-[#ccc]">
            <div class="text-[16px] leading-[40px] text-[#666] bg-[#f7f7f7] pl-[10px]" id="div-20"> 最近更新文章 </div>
            <a-row id="div-21" class="!px-[14px] py-[7px]">
              <a-col v-for="(item, index) in articleListLeft" :key="index" class="my-[6px]" :id="`div-22-${index}`">
                <a-row :wrap="false" class="items-center" :id="`div-23-${index}`">
                  <a-col flex="none" :id="`div-24-${index}`">
                    <a-avatar
                      shape="square"
                      :size="16"
                      class="!text-[12px] bg-[#999]"
                      :class="{
                        '!bg-[#F0524F]': index == 0 || index == 1 || index == 2,
                      }"
                      :id="`div-25-${index}`"
                    >
                      {{ index + 1 }}
                    </a-avatar>
                  </a-col>
                  <a-col flex="auto" class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]" :id="`div-26-${index}`">
                    <a-typography-link href="#" :id="`div-261-${index}`" class="!text-[#333]">{{ item.title }}</a-typography-link>
                  </a-col>
                </a-row>
              </a-col>
            </a-row></div
          >
        </a-col>
      </a-row>
    </div>
    <div class="m-auto w-3/5 pb-8" id="div-27">
      <a-row :gutter="15" id="div-28">
        <a-col :span="17" class="" id="div-29">
          <a-row :gutter="[14, 14]" id="div-30">
            <a-col :span="12" class="" v-for="(data, index) in bottom" :key="index" :id="`div-31-${index}`">
              <div class="bg-[#fff] border-solid border border-[#ccc] !p-[14px]" :id="`div-32-${index}`">
                <div class="leading-[20px] mb-[10px]" :id="`div-33-${index}`">
                  <span class="text-[16px] text-[#D62A3B]" :id="`div-34-${index}`">{{ data.bottomTitle.title }}</span>
                  <a-typography-link href="#" :id="`div-35-${index}`" class="text-[12px] !text-[#999] float-right">更多»</a-typography-link>
                </div>
                <a-row :id="`div-36-${index}`" class="flex" :gutter="10">
                  <a-col :span="6" :id="`div-37-${index}`">
                    <a-image
                      :src="data.bottomTitle.avatar"
                      width="100%"
                      height="100%"
                      class="object-cover aspect-[4/3]"
                      :id="`div-38-${index}`"
                    />
                  </a-col>
                  <a-col :span="18" class="" :id="`div-39-${index}`">
                    <a-typography-link href="#" class="!text-[#444] text-[16px] mt-2 !mb-0 pl-[10px]" :id="`div-40-${index}`">
                      {{ data.bottomTitle.content }}
                    </a-typography-link>
                    <a-typography-paragraph
                      class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none"
                      :id="`div-41-${index}`"
                      >02-05</a-typography-paragraph
                    >
                  </a-col>
                </a-row>
                <a-divider class="my-[10px]" :id="`div-42-${index}`" />
                <a-row :gutter="20" class="mt-[14px]" :id="`div-43-${index}`">
                  <a-col :span="24" v-for="(item, ind) in data.bottomList" :key="ind" class="my-[6px]" :id="`div-44-${index}-${ind}`">
                    <a-row :wrap="false" class="items-center" :id="`div-45-${index}-${ind}`">
                      <a-col flex="none" :id="`div-46-${index}-${ind}`">
                        <div class="w-[6px] h-[6px] rounded-full bg-[#333]" :id="`div-47-${index}-${ind}`"></div
                      ></a-col>
                      <a-col
                        flex="auto"
                        class="overflow-hidden whitespace-nowrap text-ellipsis text-[14px] pl-[5px]"
                        :id="`div-48-${index}-${ind}`"
                      >
                        <a-typography-link href="#" :id="`div-481-${index}-${ind}`" class="!text-[#444]">{{
                          item.title
                        }}</a-typography-link>
                      </a-col>
                      <a-col flex="none" :id="`div-49-${index}-${ind}`">
                        <div class="text-gray-400 text-sm ml-[40px]" :id="`div-50-${index}-${ind}`"> {{ item.date }}</div>
                      </a-col>
                    </a-row>
                  </a-col>
                </a-row>
              </div>
            </a-col>
          </a-row>
        </a-col>
        <a-col :span="7" class="h-full" id="div-51">
          <div class="bg-[#fff] border-solid border border-[#ccc]" id="div-52">
            <div class="text-[16px] leading-[40px] text-[#666] bg-[#f7f7f7] pl-[10px] mb-[10px]" id="div-53"> 热门文章 </div>
            <a-row class="flex px-[10px]" v-for="(item, index) in a" :key="index" :id="`div-54-${index}`" :gutter="10">
              <a-col :span="8" :id="`div-55-${index}`">
                <a-image :src="item.avatar" width="100%" height="100%" class="object-cover aspect-[4/3]" :id="`div-56-${index}`" />
              </a-col>
              <a-col :span="16" class="" :id="`div-57-${index}`">
                <a-typography-link href="#" class="!text-[#666] text-[14px] mt-2 !mb-0 pl-[10px]" :id="`div-58-${index}`">
                  {{ item.content }}
                </a-typography-link>
                <a-typography-paragraph class="text-gray-400 text-sm !mb-0 absolute bottom-0 right-0 leading-none" :id="`div-59-${index}`"
                  >02-05</a-typography-paragraph
                >
              </a-col>
              <a-divider class="my-[10px]" :id="`div-60-${index}`" /> </a-row
          ></div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="jsx">
  const articleList = ref([
    {
      title: '问核显世界,谁主沉浮? 集成显卡的发展历程及...',
      date: '08-13',
      color: 'red',
    },
    {
      title: '成都初中/小学 数学辅导 一对一仅100元起',
      date: '01-20',
      color: 'blue',
    },
    {
      title: '处理器世界天下大乱，乱世里的六大英雄人物...',
      date: '06-17',
      color: 'gray',
    },
    {
      title: '这类显卡日落西山，但落不下去（附：英伟达...',
      date: '02-04',
      color: 'blue',
    },
    {
      title: '只要采用这个阵型，中国足球队能拿冠军（CP...',
      date: '12-05',
      color: 'gray',
    },
    {
      title: 'i9-13900K和R9-7950X决战紫禁之巅 (酷睿13...',
      date: '10-23',
      color: 'blue',
    },
    {
      title: '160款电脑处理器的越级比武，既决高下，也分...',
      date: '10-17',
      color: 'gray',
    },
    {
      title: 'intel和AMD处理器哪家好? 比CPU天梯图更高...',
      date: '01-07',
      color: 'blue',
    },
    {
      title: '第一个出生的靠边站（一张图看清酷睿处理器1...',
      date: '06-04',
      color: 'gray',
    },
    {
      title: '站在角落里的冠军——主流处理器性价比第一...',
      date: '09-24',
      color: 'blue',
    },
  ]);
  const articleListLeft = ref([
    {
      title: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
      date: '08-13',
      color: 'red',
    },
    {
      title: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
      date: '01-20',
      color: 'blue',
    },
    {
      title: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
      date: '06-17',
      color: 'gray',
    },
    {
      title: '换个名字算新品？AMD 200系列笔记本CPU天梯图2025新版',
      date: '02-04',
      color: 'blue',
    },
    {
      title: '十大高性价比轻薄本（2025年2月小虫排行榜）',
      date: '12-05',
      color: 'gray',
    },
    {
      title: '十大高性价比游戏电脑主机（小虫精选游戏电脑配置2025年2月排行）',
      date: '10-23',
      color: 'blue',
    },
    {
      title: '极速空间 2025年新年力作：CPU AI性能天梯图DIY版  正式发布',
      date: '10-17',
      color: 'gray',
    },
    {
      title: '成都初中/小学 数学辅导 一对一仅100元起',
      date: '01-07',
      color: 'blue',
    },
    {
      title: '两分钟看懂RTX50系列显卡（RTX50/40显卡参数速查表）',
      date: '06-04',
      color: 'gray',
    },
    {
      title: '平庸和潜力共存，酷睿Ultra200S助英特尔重归王座',
      date: '09-24',
      color: 'blue',
    },
  ]);
  const a = ref([
    {
      avatar: 'https://picsum.photos/id/1/100/75',
      content: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
    },
    {
      avatar: 'https://picsum.photos/id/2/100/75',
      content: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
    },
    {
      avatar: 'https://picsum.photos/id/3/100/75',
      content: '笔记本电脑十佳型号（2024年2月小虫排行榜 轻薄游戏高端综合榜）',
    },
    {
      avatar: 'https://picsum.photos/id/4/100/75',
      content: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
    },
    {
      avatar: 'https://picsum.photos/id/5/100/75',
      content: '十大高性价比游戏本（小虫2024年11月游戏本排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/6/100/75',
      content: '饥望图灵眼欲穿，遥遥无期怎么办：二手显卡性价比型号选购指南',
    },
    {
      avatar: 'https://picsum.photos/id/7/100/75',
      content: '十大游戏显卡排行（2022年6月排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/8/100/75',
      content: '十大高性价比显示器（2024年11月小虫排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/9/100/75',
      content: '十大高端游戏本（2024年2月高配置笔记本小虫排行榜）',
    },
    {
      avatar: 'https://picsum.photos/id/10/100/75',
      content: '你准备买哪张车票？——华硕微星技嘉主板的系列介绍',
    },
    {
      avatar: 'https://picsum.photos/id/11/100/75',
      content: '十大高性价比固态硬盘（小虫2022年6月排行） 附问答：120GB固态硬盘够用吗',
    },
    {
      avatar: 'https://picsum.photos/id/12/100/75',
      content: '2024笔记本电脑十大品牌 （小虫笔记本品牌排行）',
    },
  ]);
  const bottom = ref([
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/13/100/75',
        content: '极速空间笔记本CPU天梯图2025（移动版CPU性能排行）',
        title: 'CPU',
      },
      bottomList: [
        {
          title: '极速空间CPU天梯图2024（intel和AMD CPU性能排行）——跟小虫学电脑配置',
          date: '08-13',
        },

        {
          title: '换个名字算新品？AMD 200系列笔记本CPU天梯图2025新版',
          date: '06-17',
        },
        {
          title: '极速空间 2025年新年力作：CPU AI性能天梯图DIY版  正式发布',
          date: '02-04',
        },
        {
          title: '平庸和潜力共存，酷睿Ultra200S助英特尔重归王座',
          date: '01-20',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/14/100/75',
        content: 'AMD主板芯片组参数速查表(202410)',
        title: '主板',
      },
      bottomList: [
        {
          title: 'Intel主板芯片组参数速查表（202410版）',
          date: '08-13',
        },
        {
          title: '你准备买哪张车票？——华硕微星技嘉主板的系列介绍',
          date: '01-20',
        },
        {
          title: 'AMD 300/400/500/600主板芯片组的区别',
          date: '06-17',
        },
        {
          title: '一张图看清intel 100、200、300、400、500、600主板芯片组的区别',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/15/100/75',
        content: '极速空间显卡天梯图 （2024台式显卡和笔记本显卡性能排行）——跟小虫学电脑配置',
        title: '显卡',
      },
      bottomList: [
        {
          title: '两分钟看懂RTX50系列显卡（RTX50/40显卡参数速查表）',
          date: '08-13',
        },
        {
          title: '摩尔线程MTT S80，国产游戏显卡从0到1的进步',
          date: '01-20',
        },
        {
          title: '问核显世界,谁主沉浮？集成显卡的发展历程及英雄排名（CPU核心显卡天梯图）',
          date: '06-17',
        },
        {
          title: '2024年7月新文《问核显世界，谁主沉浮》已在“今日头条-小虫站长”号 首发',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/16/100/75',
        content: '十大高性价比固态硬盘（小虫2022年6月排行） 附问答：120GB固态硬盘够用吗',
        title: '内存硬盘',
      },
      bottomList: [
        {
          title: '谁才是内存的老大：内存的频率谁说了算，是CPU还是主板？ ',
          date: '08-13',
        },
        {
          title: '单枪匹马入沙场，双剑合璧霸天下：探索双通道高频内存性价比（AMD独显平台）',
          date: '01-20',
        },
        {
          title: '固态硬盘什么牌子好（30个实力品牌同场较量）',
          date: '06-17',
        },
        {
          title: '一阵表演猛如虎，一看门票收入2元5 ：探索双通道高频内存性价比（intel独显平台）',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/17/100/75',
        content: '成都初中/小学 数学辅导 一对一仅100元起',
        title: '机箱电源其它',
        more: '更多',
      },
      bottomList: [
        {
          title: '通知：极速空间不定时启用验证码访问',
          date: '08-13',
        },
        {
          title: '从低学历到全球顶尖学者，草根逆袭之“四大天王',
          date: '01-20',
        },
        {
          title: '站长帮您选电脑（VIP一对一）专业级服务，特价30元',
          date: '06-17',
        },
        {
          title: '小虫站长研发的产品：好习惯亲子棋，边玩边学',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/18/100/75',
        content: '十大高性价比游戏电脑主机（小虫精选游戏电脑配置2025年2月排行）',
        title: '台式电脑',
      },
      bottomList: [
        {
          title: '一封匿名举报信和商战（电脑游戏室往事/第五篇 ）',
          date: '08-13',
        },
        {
          title: '侦察兵发现小工贪腐（电脑游戏室往事/第四篇）',
          date: '01-20',
        },
        {
          title: '裤兜插砖和骨灰级玩家（电脑游戏室往事/第三篇）',
          date: '06-17',
        },
        {
          title: '富二代和穷十八代（电脑游戏室往事/第一篇）',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/19/100/75',
        content: '十大高性价比显示器（2024年11月小虫排行榜）',
        title: '显示器',
      },
      bottomList: [
        {
          title: '十大高性价比电竞显示器（2021年4月小虫排行榜',
          date: '08-13',
        },
        {
          title: '旋转升降支架值不值100块？AOC电竞显示器24G2和24G2E的区别',
          date: '01-20',
        },
        {
          title: '餐厅内发生的故事：良心发现还是老谋深算',
          date: '06-17',
        },
        {
          title: '电脑显示器什么牌子好',
          date: '02-04',
        },
      ],
    },
    {
      bottomTitle: {
        avatar: 'https://picsum.photos/id/20/100/75',
        content: '十大高性价比轻薄本（2025年2月小虫排行榜）',
        title: '笔记本电脑',
      },
      bottomList: [
        {
          title: '算算二手游戏本性价比，“旧比新贵”背后的深层逻辑',
          date: '08-13',
        },
        {
          title: '二手笔记本电脑精选机型（2024年11月更新）',
          date: '01-20',
        },
        {
          title: '十大高性价比游戏本（小虫2024年11月游戏本排行榜）',
          date: '06-17',
        },
        {
          title: '游戏看锐龙，轻薄赏明月（笔记本选购之武功秘籍第一册，适用于2024年10月）',
          date: '02-04',
        },
      ],
    },
  ]);
</script>

<style></style>
